<template>
  <div style="padding: 10px;">
    <el-row :gutter="10">
      <fold :span="5" :xs="24" :show.sync='sideshow'>
        <el-card shadow="never">
          <org-tree ref="orgTree" modelType="'dept','community','floor','unit','room'" @nodeClick="handleNodeClick" @firstNodeClick="handleNodeClick"/>
        </el-card>
      </fold>
      <el-col :span="sideshow ? 19 : 24" :xs="24">
        <el-card shadow="never">
          <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleFukuan" :class="{'btn-pitch-on':activeName=='fukuan'?true:false}">
                <svg-icon icon-class="fukuan" />
                退费记录
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleYiShou">
                <svg-icon icon-class="qfmx" />
                退已收款
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleBaozhengjin">
                <svg-icon icon-class="qfmx" />
                退保证金
              </el-button>
            </el-col>
            <el-col :span="1.5">
              <el-button type="primary" plain size="mini" @click="handleYuShou">
                <svg-icon icon-class="YSKX" />
                退预收款
              </el-button>
            </el-col>
          </el-row>

          <div class="main">
            <advice-payment ref="paymentRef" v-show="mainName=='fukuan'"  />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <too-receiptlist ref="receiptRef" projectIdIN="'01','02','05'" modelType="yishou" @ok="handleFukuan" v-hasPermi="['payfee:advicePayment:tooReceiptlist']"/>
    <too-bail-receiptlist  ref="bailReceiptRef" projectIdIN="'03'"  modelType="baozhengjin" @ok="handleFukuan" v-hasPermi="['payfee:advicePayment:tooReceiptlist']"/>
    <advance-receipt-list ref="advanceRef" @ok="handleFukuan" v-hasPermi="['payfee:advanceReceipt:list']"/>
  </div>
</template>

<script>
  import AdvicePayment from "./advicePaymentList"
  import TooReceiptlist from "./tooReceiptlist"
  import TooBailReceiptlist from "./tooReceiptlist"
  import AdvanceReceiptList from "./advanceReceiptList"
  export default {
    name: "advicePaymentMain",
    components:{ AdvicePayment , TooReceiptlist,AdvanceReceiptList,TooBailReceiptlist},
    data() {
      return {
        sideshow:true,
        currentNode:{},
        activeName:'fukuan',
        mainName:'fukuan',
        modelType:'',
        currentNode:{},
      };
    },
    created() {

    },
    methods: {
      handleNodeClick(node){
        this.currentNode = node
        if(this.currentNode.modelType == 'room'){
          this.activeName='fukuan'
          this.mainName = 'fukuan'
          this.$refs.paymentRef.show({currentNode:this.currentNode})
        }
      },
      handleFukuan(){
        this.activeName='fukuan'
        if(this.currentNode.modelType == 'room'){
          this.mainName = 'fukuan'
          this.$refs.paymentRef.show({currentNode:this.currentNode})
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      handleYiShou(){
        if(this.currentNode.modelType == 'room'){
          this.$refs.receiptRef.show({currentNode:this.currentNode})
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      handleBaozhengjin(){
        if(this.currentNode.modelType == 'room'){
          this.$refs.bailReceiptRef.show({currentNode:this.currentNode})
        }else{
          this.msgError("请先选择房屋!");
        }
      },
      handleYuShou(){
        if(this.currentNode.modelType == 'room'){
          this.$refs.advanceRef.show({currentNode:this.currentNode})
        }else{
          this.msgError("请先选择房屋!");
        }
      }
    }
  };
</script>
<style lang="scss" scoped >
  .btn-pitch-on{
    background-color: #1890ff;
    color: #FFFFFF;
  }
</style>
